<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style type="text/css">
table, th, td {
	border: 1px solid blue;
}
</style>
<script src="https://cdn.bootcss.com/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
	Array.prototype.contains = function(needle) {
		for (i in this) {
			if (this[i] == needle)
				return true;
		}
		return false;
	}
	// 生成商品的最终sku
	function initsku() {
		var thead = "<tr>";
		var tbody = "";
		var sku_array = [];
		var skutype_array = [];
		var sku_map = new Map();
		$("#tabs-3").find("input[type=\"checkbox\"]").each(function(i, n) {
			if ($(this).attr("checked")) {
				var skutype_val = $(this).attr("skutype_val");
				var skutype = $(this).attr("skutype");
				var sku_val = $(this).attr("sku_val");
				var sku = $(this).attr("sku");
				if (thead.indexOf(skutype_val) < 0) {
					sku_array = [];
					skutype_array.push(skutype);
					thead += "<td>" + skutype_val + "</td>";
				}
				sku_array.push(sku_val);
				sku_map.set(skutype, sku_array);
			}
		});
		thead += "<td>价格</td><td>数量</td>";
		thead += "</tr>";
		var count = 1;
		var rowspan_map = new Map();// 计算rowspan及其位置,最后一列动rowspan一定是1，所以不用计算
		var checkelement = new Map();
		for (var i = skutype_array.length - 2; i >= 0; i--) {
			count = count * (sku_map.get(skutype_array[i + 1]).length);
			rowspan_map.set(skutype_array[i], count);
		}

		var tdcount = 1;
		// 计算最后一个type的td的个数
		for (var i = 0; i < skutype_array.length; i++) {
			tdcount = tdcount * (sku_map.get(skutype_array[i]).length)
		}
		for (var i = skutype_array.length - 2; i >= 0; i--) {
			for (var k = 0; k < sku_map.get(skutype_array[i]).length; k++) {
				var array = [];
				if (checkelement.get(sku_map.get(skutype_array[i])[k])) {
					array = checkelement.get(sku_map.get(skutype_array[i])[k]);
				}
				array.push(rowspan_map.get(skutype_array[i]) * (k) + 1);
				var a = 0;
				while (a < tdcount) {
					a = rowspan_map.get(skutype_array[i])
							* sku_map.get(skutype_array[i]).length
							+ array[array.length - 1];
					array.push(a);
				}
				checkelement.set(sku_map.get(skutype_array[i])[k], array);
			}
		}
		console.log(checkelement);
		var last = sku_map.get(skutype_array[skutype_array.length - 1]);
		var temp = 0;
		for (var i = 0; i < tdcount / last.length; i++) {
			for (var j = 0; j < last.length; j++) {
				++temp;
				tbody += "<tr>";
				for (var k = 0; k < skutype_array.length - 1; k++) {
					for (var l = 0; l < sku_map.get(skutype_array[k]).length; l++) {
						var array = [];
						if (checkelement.get(sku_map.get(skutype_array[k])[l])) {
							array = checkelement.get(sku_map
									.get(skutype_array[k])[l]);
						}
						if (array.contains(temp)) {
							tbody += "<td rowspan=\"";
							tbody += rowspan_map.get(skutype_array[k]);
							tbody += "\">";
							tbody += sku_map.get(skutype_array[k])[l];
							tbody += "</td>";
						}
					}
				}
				tbody += "<td>";
				tbody += last[j];
				tbody += "</td>";
				tbody += "<td>";
				tbody +='<input type="text" value="价格" />';
				tbody += "</td>";
				tbody += "<td>";
				tbody +='<input type="text" value="数量" />';
				tbody += "</td>";
				tbody += "</tr>";
			}
		}
		$("#sku_thead").html(thead);
		$("#sku_tbody").html(tbody);
	}
</script>
</head>
<body>



	<div id="tabs-3">
		<div style="height: 20px;"></div>
		<div class="contenttitle2 nomargintop">
			<h5>颜色分类</h5>
		</div>
		<div>
			<table>
				<thead>
					<tr>
						<td><input type="checkbox" onclick="initsku()" sku_val="红色"
							sku_val_code="hongse" sku="11" skutype="1" skutype_val="颜色分类" /></td>
						<td>红色</td>
					</tr>
					<tr>
						<td><input type="checkbox" sku_val="黄色"
							sku_val_code="huangse" sku="12" skutype="1" skutype_val="颜色分类"
							onclick="initsku()" /></td>
						<td>黄色</td>
					</tr>
					<tr>
						<td><input type="checkbox" sku_val="蓝色" sku_val_code="lanse"
							sku="13" skutype="1" skutype_val="颜色分类" onclick="initsku()" /></td>
						<td>蓝色</td>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div style="height: 20px;"></div>
		<div>
			<h5>套餐类型</h5>
		</div>
		<div>
			<table>
				<thead>
					<tr>
						<td><input type="checkbox" onclick="initsku()" sku_val="套餐1"
							sku_val_code="套餐1" sku="21" skutype="2" skutype_val="套餐类型" /></td>
						<td>套餐1</td>
					</tr>
					<tr>
						<td><input type="checkbox" onclick="initsku()" sku_val="套餐2"
							sku_val_code="套餐2" sku="22" skutype="2" skutype_val="套餐类型" /></td>
						<td>套餐2</td>
					</tr>
					<tr>
						<td><input type="checkbox" onclick="initsku()" sku_val="套餐3"
							sku_val_code="套餐3" sku="23" skutype="2" skutype_val="套餐类型" /></td>
						<td>套餐3</td>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div style="height: 20px;"></div>
		<div>
			<h5>花呗分期</h5>
		</div>
		<div>
			<table>
				<thead>
					<tr>
						<td><input type="checkbox" onclick="initsku()" sku_val="分3期"
							sku_val_code="分3期" sku="31" skutype="3" skutype_val="花呗分期" /></td>
						<td>分3期</td>
					</tr>
					<tr>
						<td><input type="checkbox" onclick="initsku()" sku_val="分6期"
							sku_val_code="分6期" sku="32" skutype="3" skutype_val="花呗分期" /></td>
						<td>分6期</td>
					</tr>
					<tr>
						<td><input type="checkbox" onclick="initsku()" sku_val="分12期"
							sku_val_code="分12期" sku="33" skutype="3" skutype_val="花呗分期" /></td>
						<td>分12期</td>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div style="height: 20px;"></div>
		<div >
			<h5>宝贝销售规格</h5>
		</div>
		<div>
			<table>
				<tbody>
					<tr>
						<td>批量填充:</td>
						<td><input type="text" value="价格"
							onfocus="javascript:if(this.value=='价格')this.value='';"
							onblur="javascript:if(this.value=='')this.value='价格';" /></td>
						<td><input type="text" value="数量"
							onfocus="javascript:if(this.value=='数量')this.value='';"
							onblur="javascript:if(this.value=='')this.value='数量';" /></td>
						<td><button class="radius2 submit_btn" type="button">确定</button></td>
					</tr>
				</tbody>
			</table>
			<table >
				<thead id="sku_thead">
				</thead>
				<tbody id="sku_tbody">
				</tbody>
			</table>
		</div>
	</div>

</body>
</html>
